<template>
  <div id='operationRate'>
    <!-- . 运行率 -->
    <div style="flex:1;" id="'operationEcharts" ref="operationEcharts"></div>
    <div style="flex:2;">
      <div>
        <el-dropdown @command="handleCommand" style="display: inline-block;" trigger="click">
          <span class="el-dropdown-link">
            {{monthName}}月<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in month" :command="item" :key="index">{{item}}月
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="title">每日运行详情</div>
      </div>
      <div class="table">
        <el-table v-loading="loading" height="300" :data="dataList" border>
          <el-table-column label="创建时间" show-overflow-tooltip align="center" prop="date" />
          <el-table-column label="运行率" show-overflow-tooltip align="center" prop="runRate" />
          <el-table-column label="实际签到次数/应签到次数" show-overflow-tooltip align="center" prop="should" />
          <el-table-column label="实际包数" show-overflow-tooltip align="center" prop="package" />
        </el-table>
        <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getRunRate, getRunRateColumnar } from '@/api/runningLog/runningLog.js';
import * as echarts from 'echarts';
export default {
  name: 'operationRate',
  components: {},
  props: ['deviceCode'],
  data() {
    return {
      data: [],
      loading: false,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // deviceCode: null,
        // month: null,
      },
      monthName: new Date().getMonth() + 1,
      month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      timer: null,
      dom: null,
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.getList();
    //   this.init(this.data);
    // });
    // let _this = this;
    // _this.timer = setTimeout(() => {
    //   _this.getList();
    //   _this.init(this.data);
    // }, 1000);
  },
  beforeCreate() {},
  beforeMount() {},
  watch: {
    monthName(newVal, oldVal) {
      this.getList();
    },
    // deviceCode(newVal, oldVal) {
    //   this.getList();
    //   this.init();
    // },
    deviceCode: {
      handler: function() {
        this.$nextTick(() => {
          this.getList();
          this.init();
        });
      },
      immediate: true
    }
  },
  methods: {
    async init() {
      this.dom && this.dom.dispose();
      this.dom = echarts.init(this.$refs['operationEcharts']);
      const year = new Date().getFullYear();
      const _this = this;
      const res = await getRunRateColumnar({ deviceCode: this.deviceCode });
      if (res.code == 200) {
        const data = res.data;
        let xData = (() => {
          let arr = [];
          for (let index = 1; index <= 12; index++) {
            arr.push(`${year}-${index >= 10 ? index : '0' + index}`);
          }
          return arr;
        })();
        let option = {
          grid: {
            left: '4%',
            right: '0',
            bottom: '15%',
            top: '16%',
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            backgroundColor: null,
            formatter: (params) => {
              let str = `
            <div style='padding: 10px;background-color: #fff;border-radius: 5px;color: #595959;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18);'>
              <div style="padding: 5px;">${params[0].axisValueLabel}</div>
              <div>
                <span style=\"display:inline-block;margin-right:5px;width:10px;height:10px;background-color:rgba(91, 143, 249, 1);\"></span>
                <span>${params[0].value.toFixed(1)}%</span>
              </div>
            </div>`;
              return str;
            },
          },
          color: ['rgba(91, 143, 249, 1)'],
          xAxis: {
            type: 'category',
            data: xData,
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.45)',
              interval: 0,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.25)',
              },
            },
          },
          yAxis: {
            show: true,
            type: 'value',
            splitLine: {
              show: false,
            },
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.25)',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: (params) => {
                return `${params}%`;
              },
            },
          },
          series: [
            {
              data,
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                distance: 10,
                // barWidth: 10,
              },
            },
          ],
        };
        this.dom.setOption(option);
        this.dom.getZr().on('click', function (params) {
          let pointInPixel = [params.offsetX, params.offsetY];
          if (_this.dom.containPixel('grid', pointInPixel)) {
            let xIndex = _this.dom.convertFromPixel({ seriesIndex: 0 }, [
              params.offsetX,
              params.offsetY,
            ])[0];
            let date = new Date(xData[xIndex]).getMonth() + 1;
            _this.monthName = date;
          }
        });
        addEventListener('resize', () => {
          _this.dom.resize();
        });
      }
    },
    async getList() {
      if (!this.deviceCode) return;
      const res = await getRunRate({
        deviceCode: this.deviceCode,
        month: this.monthName,
      });
      if (res.code == 200) {
        this.dataList = res.data;
        // this.total = res.total;
      }
    },
    async getColumnar() {},
    handleCommand(command) {
      this.monthName = command;
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>
<style lang='scss' scoped>
#operationRate {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    display: inline-block;
    margin-bottom: 16px;
    margin-left: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    text-align: left;
  }
  .el-dropdown-link {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
  }
}
</style>